<template>
  <span>
    <a-range-picker
      v-bind="attrs"
      :show-time="showTime"
      :time-picker-props="{ defaultValue }"
      :model-value="rangeValue"
      @change="onTimeChange"
      :shortcuts-position="shortcutsPosition"
      :shortcuts="shortcutsR"
      value-format="YYYY-MM-DD HH:mm:ss"
    >
      <a-button>
        {{ rangeValueF }}
        <icon-close-circle
          class="ml-6 text999"
          v-if="rangeValue && rangeValue[0] && rangeValue.join(' - ') && allowClear"
          @click.stop="onTimeChange(false)"
        />
      </a-button>
    </a-range-picker>
  </span>
</template>

<script setup>
/**
 * defaultValue: 时间默认显示
 * showTime: 是否显示时分秒
 * start：开始时间
 * end：结束时间
 * showQuick是否展示快捷选项
 * shortcuts快捷选项
 * shortcutsPosition快捷选项位置
 */

import { rangeShortcuts } from './data.js'
import dayjs from 'dayjs'

defineOptions({ name: 'MsData', inheritAttrs: false })

const emit = defineEmits(['update:start', 'update:end', 'dateChange'])
const attrs = useAttrs()

const props = defineProps({
  defaultValue: {
    type: Array,
    default: () => ['00:00:00', '23:59:59'],
    require: false
  },
  start: {
    type: String,
    default: undefined,
    require: true
  },
  showTime: {
    type: Boolean,
    default: true,
    require: false
  },
  end: {
    type: String,
    default: undefined,
    require: true
  },
  shortcutsPosition: {
    type: String,
    default: 'left',
    require: false
  },
  shortcuts: {
    type: Array,
    default: () => [],
    require: false
  },
  showQuick: {
    type: Boolean,
    default: () => false,
    require: false
  },
  placeholder: {
    type: String,
    default: '选择时间检索',
    require: false
  },
  allowClear: {
    type: Boolean,
    default: true,
    require: true
  },
  valueF: {
    type: String,
    default: 'YY/MM/DD HH:mm',
    require: false
  }
})

const rangeValue = ref(['', ''])
const shortcutsR = ref([])
const rangeValueF = ref()
watch(
  () => rangeValue.value,
  (e) => {
    if (!e) rangeValueF.value = props.placeholder
    else if (!e[0]) rangeValueF.value = props.placeholder
    else rangeValueF.value = `${dayjs(e[0]).format(props.valueF)} 至 ${dayjs(e[1]).format(props.valueF)}`
  },
  {
    deep: true
  }
)

watch(
  () => [props.start, props.end],
  () => {
    rangeValue.value = [props.start, props.end]
  },
  { deep: true, immediate: true }
)

watch(
  () => [props.showQuick, props.shortcuts],
  (value) => {
    if (value[0]) {
      if (props.shortcuts.length > 0) {
        shortcutsR.value = props.shortcuts
      } else {
        shortcutsR.value = rangeShortcuts
      }
    } else {
      shortcutsR.value = []
    }
  },
  { deep: true, immediate: true }
)

const onTimeChange = (e) => {
  e = e || [undefined, undefined]
  rangeValue.value = e
  emit('update:start', e[0])
  emit('update:end', e[1])
  emit('dateChange')
}
</script>
